<div ng-controller="infiniteDropdownCtrl">

    <div class="panel panel-default">
        <div class="panel-body">
            <h4 class="text-muted">Multi Selection Mode</h4>
            <!-- ad_example_start -->
            <!-- ========== Usage Multi Select ========== -->
            <ad-infinite-dropdown dropdown-name="artistsList"
                              display-property="name"
                              initial-label="Select an artist"
                              selected-items="selectedArtists"
                              max-height="150px"
                              max-width="200px"
                              ajax-config="artistsAjaxConfig">
            </ad-infinite-dropdown>
            <p>Selected Items:</p>
            <span>
                {{ selectedArtists }}
            </span>
            <!-- ad_example_end -->
            <h4 class="text-muted">Single Selection Mode</h4>
            <!-- ad_example_start -->
            <!-- ========== Usage Single Select ========== -->
            <ad-infinite-dropdown dropdown-name="artistList"
                                  template-url="src/infinitedropdown/docs/artist.html"
                                  initial-label="Select an artist"
                                  label-display-property="name"
                                  selected-items="selectedArtist"
                                  single-selection-mode="true"
                                  on-item-click="artistClicked"
                                  max-width="230px"
                                  btn-classes="btn btn-primary btn-xs"
                                  ajax-config="artistsAjaxConfig">
            </ad-infinite-dropdown>
            <p>Selected Items:</p>
            <span>
                {{ selectedArtist }}
            </span>
            <!-- ad_example_end -->
            <h4 class="text-muted">Local Data Source Mode</h4>
            <!-- ad_example_start -->
            <!-- ========== Usage Local Data Source ========== -->
            <ad-infinite-dropdown dropdown-name="artistListLocal"
                                  template="artistListTemplate"
                                  initial-label="Select an artist"
                                  selected-items="localSelectedArtists"
                                  single-selection-mode="false"
                                  max-height="200px"
                                  local-data-source="localArtistsData">
            </ad-infinite-dropdown>
            <p>Selected Items:</p>
            <span>
                {{ localSelectedArtists }}
            </span>
            <!-- ad_example_end -->
        </div>
    </div>
</div>